<template>
	<div>
		<header class="mp-header">
			<span
				@click="backPage"
				class="back"
				><van-icon name="arrow-left"
			/></span>
			<h3 class="title">点评</h3>
		</header>

		<div class="mp-comment-head">
			<div class="commenthead-border">
				<div class="mp-comment-toal">
					综合评分

					<span class="mp-sight-score">5.0</span>
					<span class="mp__start_con"
						><van-icon
							name="star"
							v-for="item in 5"
					/></span>
				</div>

				<ul class="page__tap__bar">
					<li class="tapbar__item tage__item__active">全部评价</li>
					<li
						v-for="item in 20"
						class="tapbar__item"
					>
						有图&nbsp;
					</li>
				</ul>
			</div>
		</div>

		<div
			class="comment__item"
			v-for="item in 10"
		>
			<div class="comment__info__outer">
				<img
					src="https://qcommons.qunar.com/headshot/headshotsById/315058443.png?ssl=true&l"
					alt=""
					class="commentuser__img"
				/>
				<div class="comment__headcon">
					<div class="comment__name">o*4</div>
					<span class="comment__data__score">4.5分</span>
					<span class="mp__start_con"
						><van-icon
							name="star"
							v-for="item in 5"
					/></span>
					<span class="comment__info__data">
						<span>2023-11-01</span>
						<span class="comment-line"></span>
						<span class="comment-info-comment">江苏</span>
					</span>
				</div>
			</div>

			<p class="comment__detail">
				爸妈反应好，导游电话沟通，返程安排了方便的接送地点，谢谢导游。
			</p>

			<div class="comment__show">
				<img
					class="comment__img"
					src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/202311/e56c213c19df8ca5c41f204c94ac2bb3.jpg_240x240_1a983df8.jpg"
					alt=""
				/>
				<img
					class="comment__img"
					src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/202311/ae66423e4a72da22fddaf714e183c126.jpg_240x240_1d5d062c.jpg"
					alt=""
				/>
				<img
					class="comment__img"
					src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/202311/c878d18ab05a9220a6e845bf0e419c91.jpg_240x240_bfa4fa6d.jpg"
					alt=""
				/>
			</div>
		</div>
		<div
			class="go__top"
			@click="backToTop"
		>
			<van-icon name="upgrade" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				goTop: false,
			};
		},
		methods: {
			backToTop() {
				window.scrollTo(0, 0);
			},

			backPage() {
				this.$router.back();
			},
		},

		watch: {
			goTop(newVal, oldVal) {
				(window.pageYOffset || document.documentElement.scrollTop) === 0
					? (this.goTop = false)
					: (this.goTop = true);

				console.log(newVal, oldVal);
			},
		},

		mounted() {},
	};
</script>

<style scoped>
	.mp-header {
		height: 44px;
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		background-color: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		padding-left: 15px;
		box-sizing: border-box;
		border-bottom: 0.5px solid #e0e0e0;
		z-index: 1;
	}

	.back {
		font-size: 24px;
	}

	.title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		font-size: 16px;
		font-weight: 400;
	}

	.mp-comment-head {
		padding: 8px 0;
		border-bottom: 4px solid #f4f5f6;
		background-color: #fff;
		border-bottom: 4px solid #f4f5f6;
	}

	.commenthead-border {
	}

	.mp-comment-toal {
		padding-left: 15px;
		height: 32px;
		line-height: 32px;
		color: #666;
		margin-bottom: 8px;
	}

	.mp-sight-score {
		font-size: 20px;
		color: #333;
		font-weight: 700;
	}

	.mp__start_con {
		height: 14px;
		margin-bottom: 2px;
		padding-left: 10px;
	}

	.mp__start_con .van-icon {
		background-image: -webkit-linear-gradient(270deg, #ffeb4e 0, #ffd326 100%);
		color: rgb(255, 180, 54);
		padding-left: 2px;
	}

	.page__tap__bar {
		padding: 0 15px;
		overflow: hidden;
		display: flex;
		align-content: center;
		justify-content: start;
		flex-wrap: wrap;
		row-gap: 6px;
		column-gap: 4px;
	}

	.page__tap__bar .tage__item__active {
		background: #f2fcfd;
		border: 0.5px solid #3bd4e0;
		color: #00cad8;
	}

	.tapbar__item {
		font-size: 12px;
		line-height: 25px;
		border-radius: 14px;
		background: #f4f5f6;
		padding: 0 12px;
	}

	.comment__info__outer {
		display: flex;
		align-items: center;
		padding-top: 15px;
		color: #9e9e9e;
		margin: 0 15px 11px 15px;
		position: relative;
	}

	.commentuser__img {
		width: 34px;
		height: 34px;
		border-radius: 20px;
		vertical-align: middle;
		flex-basis: 1;
	}

	.comment__headcon {
		flex: 1;
		padding-top: 17px;
		font-size: 14px;
		line-height: 18px;
		color: #9e9e9e;
	}

	.comment__info__data {
		float: right;
	}

	.comment__detail {
		line-height: 22px;
		color: #333;
		margin: 0 15px 11px 15px;
		font-size: 12px;
	}

	.comment__show {
		margin-bottom: 15px;
		padding-left: 15px;

		max-height: 110px;
	}

	.comment__img {
		width: 90px;
		height: 90px;
		margin-right: 4px;
		border-radius: 6px;
	}

	.comment__item {
		overflow: hidden;
		position: relative;
	}

	.comment__item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		background-color: #e0e0e0;
		margin: 0 15px;
		width: 100%;
		box-sizing: border-box;
	}

	.go__top {
		position: fixed;
		bottom: 65px;
		right: 10px;
		z-index: 2;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		text-align: center;
	}

	.go__top .van-icon {
		font-size: 44px;
		line-height: 52px;
	}
</style>
